import React, {Component} from 'react';

class App extends Component {
    myRef = React.createRef();
    state = {
        list: [{
            id: 1, name: "张三",
        }, {
            id: 2, name: "李四"
        }]
    }

    add = () => {
        if (this.myRef.current.value === '') {
            return;
        }
        const newState = [...this.state.list];
        newState.push({id: Date.now(), name: this.myRef.current.value});
        this.setState({list: newState});
        this.myRef.current.value = '';
    }

    del(index) {
        const newState = [...this.state.list];
        newState.splice(index, 1);
        this.setState({list: newState});
    }

    render() {
        return (<div>
            <input ref={this.myRef}/>
            <button onClick={this.add}>添加</button>
            <ul>
                {this.state.list.map((item, index) => <li key={item.id}><span
                    dangerouslySetInnerHTML={{__html: item.name}}></span>
                    <button onClick={() => this.del(index)}>删除</button>
                </li>)}
            </ul>
            {this.state.list.length === 0 ? <div>暂无数据</div> : null}
        </div>);
    }
}

export default App;